<script setup>
import { getListApi } from "../../api/article";
import { ref, onMounted } from "vue";
import { onPullDownRefresh } from "@dcloudio/uni-app";

const list = ref([]);

const getList = async () => {
  const res = await getListApi();
  list.value = res;
};

const toPage = (id) => {
  uni.navigateTo({
    url: `/pages/detail/index?id=${id}`,
  });
};

onPullDownRefresh(() => {
  list.value = [];
  getList().then(() => {
    uni.stopPullDownRefresh();
  });
});

onMounted(() => {
  getList();
});
</script>
<template>
  <view class="index">
    <view
      class="index__list-item"
      v-for="item in list"
      :key="item.id"
      @click="toPage(item.id)"
    >
      <view class="index__list-item-title">{{ item.title }}</view>
      <view class="index__list-item-content">
        <image
          :src="`http://localhost:3000/${item.img}`"
          mode="widthFix"
        ></image>
        <view class="index__list-item-content-text"
          ><p>
            {{ item.content }}
          </p></view
        >
      </view>
    </view>
  </view>
</template>
